<template>
  <div
    class="CellBox"
    :class="{
      cellLine:line,
      isTop:position==='top'
    }"
    :style="{
      marginBottom:margin+'px',
      paddingBottom:line?margin+'px':'',
    }"
  >
    <div class="CellBox-head" :style="{marginBottom:margin+'px',}" v-if="title">
      <h4>{{title}}</h4>
    </div>
    <div class="CellBox-content">
      <slot/>
    </div>
  </div>
</template>
<script>
export default {
  name: "CellBox",
  props: {
    title:{
      type:String,
    },
    position:{
      type:String,
    },
    line:{
      type:Boolean,
      default: () => {
        return false;
      },
    },
    margin:{
      type:Number,
      default: () => {
        return 16;
      },
    }
  }, // 获取父组件数据
  components: {

  },
  created() {

  },
  data() {
    return {

    };
  },
  methods: {

  },
  computed: {

  }
};
</script>
<style  lang="scss" scoped>
.CellBox{
  display:block;
  overflow: hidden;
  &:last-child{
    margin-bottom:0!important;
  }
  &.cellLine{
    border-bottom: 1px #e6e6e6 solid;
  }
  .CellBox-head{
    color: #333;
  }
  &.isTop{
    >*{
      &:not(:last-child){
        margin-bottom:8px;
      }
    }
    .CellBox-content{
      padding: 16px;
      background: #fff;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}
</style>
